import { Row, Col, Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import "./App.css";

const data = [
  [
    { name: "1", bgc: "#5070dd", icon: null },
    { name: "分类评估", bgc: "#b6d634", icon: null },
    { name: "3", bgc: "#505372", icon: null },
    { name: "4", bgc: "#ff994d", icon: null },
  ],
  [
    { name: "企业应急", bgc: "#0ca8df", icon: null },
    { name: "2", bgc: "#ffd10a", icon: null },
    { name: "3", bgc: "#fb628b", icon: null },
    { name: "4", bgc: "#785db0", icon: null },
  ],
  [
    { name: "1", bgc: "#7e543e", icon: null },
    { name: "2", bgc: "#159d79", icon: null },
    { name: "3", bgc: "#35b9df", icon: null },
    { name: "4", bgc: "#ea88d1", icon: null },
  ],
];

function App() {
  return (
    <div style={{ width: "800px ", margin: "0 auto", color: "white" }}>
      <h1 style={{ color: "#666", textAlign: "center" }}>头部文字</h1>
      {data.map((rowItem) => (
        <Row
          gutter={[24, 24]}
          style={{ position: "relative", marginTop: "30px" }}
          key={JSON.stringify(rowItem)}
        >
          {rowItem.map(({ name, bgc, icon }) => (
            <Col span={6} key={name}>
              <div
                style={{
                  background: bgc,
                  padding: "55px 0",
                  textAlign: "center",
                  cursor: "pointer",
                }}
              >
                {name}
              </div>
            </Col>
          ))}
          <Button
            style={{
              position: "absolute",
              right: "-60px",
              top: "50%",
              transform: "translateY(-50%)",
              height: 50,
              width: 50,
            }}
            icon={<PlusOutlined />}
          />
        </Row>
      ))}
    </div>
  );
}

export default App;
